<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            background: url(./bg2.jpg);
            background-size: cover;
        }
        .box1{
            display: flex;
            height: 24px;
            justify-content: center;
        }
        .box2{
            font-size: 22px;
            margin-top: 12px;
            font-weight: bold;
            color: #0efafe;
        }
        .box3{
            width: 1384px;
            height: 678px;
            position: absolute;
            left: 40px;
            top: 57px;
            display: flex;
            justify-content: space-between;
        }
        .box4{
            width: 1000px;
            height: 678px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .box5{
            width: 365px;
            height: 678px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .niubi {
            width: 1000px;
            height: 165px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .niubi2 {
            width: 1000px;
            height: 235px;
        }
        .niubi3 {
            width: 1000px;
            height: 235px;
        }
        .aaa {
            width: 365px;
            height: 325px;
        }
        .aaa2 {
            width: 365px;
            height: 325px;
        }
        .niubi-hr {
            width: 235px;
            height: 145px;
            border: 2px solid #078ecb;
            position: relative;
        }
        .on1 {
            width: 25px;
            height: 25px;
            position: absolute;
            top: -2.1px;
            right: -2.1px;
        }
        .on2 {
            width: 25px;
            height: 25px;
            position: absolute;
            bottom: -2.1px;
            left: -2.1px;
        }
        .on3 {
            width: 25px;
            height: 25px;
            position: absolute;
            bottom: -2.1px;
            right: -2.1px;
        }
        .on4 {
            width: 60px;
            height: 10px;
            position: absolute;
            top: -10.1px;
            left: -2.1px;
        }
        .biaoti4 {
            margin-top: 20px;
            margin-left: 15px;
            margin-bottom: 20px;
            color: #fff;
        }
        .qian {
            margin-left: 15px;
        }
        .qian1 {
            color: #0efbfe;
            font-weight: bold;
            font-size: 20px;
            margin-right: 10px;
        }
        .qian2 {
            color: #0ddbf2;
            font-size: 10px;
        }
        .biaoti {
            margin-left: 15px;
        }
        .biaoti1 {
            font-size: 10px;
            margin-right: 10px;
            color: #fff;
        }
        .biaoti2 {
            font-size: 10px;
            color: #fff;
        }
        .niubi2 {
            display: flex;
            justify-content: space-between;
        }
        .niubi-sb {
             width: 580px;
             height: 235px;
            border: 2px solid #078ecb;
            position: relative;
        }
        .niubi-sb2 {
            width: 400px;
            height: 235px;
            border: 2px solid #078ecb;
            position: relative;
        }
        .niubi3 {
            display: flex;
            justify-content: space-between;
        }
        .niubi4 {
            width: 580px;
            height: 235px;
            border: 2px solid #078ecb;
            position: relative;
        }
        .niubi5 {
            width: 400px;
            height: 235px;
            border: 2px solid #078ecb;
            position: relative;
        }
        .on5 {
            width: 25px;
            height: 25px;
            position: absolute;
            top: -2.1px;
            right: -2.1px;
        }
        .on6 {
            width: 25px;
            height: 25px;
            position: absolute;
            bottom: -2.1px;
            left: -2.1px;
        }
        .on7 {
            width: 25px;
            height: 25px;
            position: absolute;
            bottom: -2.1px;
            right: -2.1px;
        }
        .on8 {
            width: 60px;
            height: 10px;
            position: absolute;
            top: -10.1px;
            left: -2.1px;
        }
        .xw {
            width: 380 px;
            height: 150px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-content: space-around;
        }            
        .xw-ww {
            width: 100px;
            height: 50px;
            border: 1px solid #ffffff00;
        }
        .xw-ww p{
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #0efbfe;
        }
        .xw-ww span{
            font-size: 12px;
            margin-left: 14px;
            color: #fafcfe;
        }
        .niubi5 h3{
            font-size: 15px;
            color: #ffffff;
            margin-left: 20px;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .xw {
            width: 380 px;
            height: 150px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-content: space-around;
        }

        .xw-ww {
            width: 100px;
            height: 50px;
            border: 1px solid #ffffff00;

        }
        .xw-ww p{
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #0efbfe;
        }
        .xw-ww span{
            font-size: 12px;
            margin-left: 14px;
            color: #fafcfe;
        }
        .niubi5 h3{
            font-size: 15px;
            color: #ffffff;
            margin-left: 20px;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .aaa {
            position: relative;
            border: 2px solid #078ecb;
        }
        .aaa2 {
            position: relative;
            border: 2px solid #078ecb;
        }    
        h3{
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p class="box2">智能大屏智慧中心</p >
    </div>
    <div class="box3">
        <div class="box4">
            <div class="niubi">
                <div class="niubi-hr">
                    <img src="./border_bg.jpg" alt="" class="on1">
                    <img src="./border_bg.jpg" alt="" class="on2">
                    <img src="./title_right_bg.png" alt="" class="on3">
                    <img src="./title_left_bg.png" alt="" class="on4">
                    <h3 class="biaoti4">这里是标题1</h3>
                    <div class="qian">
                        <span class="qian1">6890.69</span>
                        <span class="qian2">元</span>
                    </div>
                    <div class="biaoti">
                        <span class="biaoti1">小标题：文字</span>
                        <span class="biaoti2">小标题：文字</span>
                    </div>
                </div>
                <div class="niubi-hr">
                    <img src="./border_bg.jpg" alt="" class="on1">
                    <img src="./border_bg.jpg" alt="" class="on2">
                    <img src="./title_right_bg.png" alt="" class="on3">
                    <img src="./title_left_bg.png" alt="" class="on4">
                    <h3 class="biaoti4">这里是标题1</h3>
                    <div class="qian">
                        <span class="qian1">6890.69</span>
                        <span class="qian2">元</span>
                    </div>
                    <div class="biaoti">
                        <span class="biaoti1">小标题：文字</span>
                        <span class="biaoti2">小标题：文字</span>
                    </div>
                </div>
                <div class="niubi-hr">
                    <img src="./border_bg.jpg" alt="" class="on1">
                    <img src="./border_bg.jpg" alt="" class="on2">
                    <img src="./title_right_bg.png" alt="" class="on3">
                    <img src="./title_left_bg.png" alt="" class="on4">
                    <h3 class="biaoti4">这里是标题1</h3>
                    <div class="qian">
                        <span class="qian1">6890.69</span>
                        <span class="qian2">元</span>
                    </div>
                    <div class="biaoti">
                        <span class="biaoti1">小标题：文字</span>
                        <span class="biaoti2">小标题：文字</span>
                    </div>
                </div>
                <div class="niubi-hr">
                    <img src="./border_bg.jpg" alt="" class="on1">
                    <img src="./border_bg.jpg" alt="" class="on2">
                    <img src="./title_right_bg.png" alt="" class="on3">
                    <img src="./title_left_bg.png" alt="" class="on4">
                    <h3 class="biaoti4">这里是标题1</h3>
                    <div class="qian">
                        <span class="qian1">6890.69</span>
                        <span class="qian2">元</span>
                    </div>
                    <div class="biaoti">
                        <span class="biaoti1">小标题：文字</span>
                        <span class="biaoti2">小标题：文字</span>
                    </div>
                </div>
            </div>
            <div class="niubi2">
                <div class="niubi-sb">
                    <img src="./border_bg.jpg" alt="" class="on5">
                    <img src="./border_bg.jpg" alt="" class="on6">
                    <img src="./title_right_bg.png" alt="" class="on7">
                    <img src="./title_left_bg.png" alt="" class="on8">
                    <h3>这里是标题</h3>
                </div>
                <div class="niubi-sb2">
                    <img src="./border_bg.jpg" alt="" class="on5">
                    <img src="./border_bg.jpg" alt="" class="on6">
                    <img src="./title_right_bg.png" alt="" class="on7">
                    <img src="./title_left_bg.png" alt="" class="on8">
                    <h3>这里是标题</h3>
                </div>

            </div>
            <div class="niubi3">
                <div class="niubi4">
                    <img src="./border_bg.jpg" alt="" class="on5">
                    <img src="./border_bg.jpg" alt="" class="on6">
                    <img src="./title_right_bg.png" alt="" class="on7">
                    <img src=".title_left_bg.png" alt="" class="on8">
                    <h3>这里是标题</h3>
                </div>
            <div class="niubi5">
                <img src="./border_bg.jpg" alt="" class="on5">
                <img src="./border_bg.jpg" alt="" class="on6">
                <img src="./title_right_bg.png" alt="" class="on7">
                <img src="./title_left_bg.png" alt="" class="on8">
                <h3>这里是标题</h3>
                <div class="xw">
                    <div class="xw-ww">
                        <p>23</p >
                        <span>今日收益比例</span>
                    </div>
                    <div class="xw-ww">
                        <p>107</p >
                        <span>本月收益比例</span>
                    </div>
                    <div class="xw-ww">
                        <p>107  </p >
                        <span>历史收益比例</span>
                    </div>
                    <div class="xw-ww">
                        <p>23</p >
                        <span>今日收益比例</span>
                    </div>
                    <div class="xw-ww">
                        <p>23</p >
                        <span>本月收益比例</span>
                    </div>
                    <div class="xw-ww">
                        <p>23</p >
                        <span>历史收益比例</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box5">
        <div class="aaa">
            <img src="./border_bg.jpg" alt="" class="on5">
            <img src="./border_bg.jpg" alt="" class="on6">
            <img src="./title_right_bg.png" alt="" class="on7">
            <img src="./title_left_bg.png" alt="" class="on8">   
             <h3>这里是标题</h3>

        </div>
        <div class="aaa2">
            <img src="./border_bg.jpg" alt="" class="on5">
            <img src="./border_bg.jpg" alt="" class="on6">
            <img src="./title_right_bg.png" alt="" class="on7">
            <img src="./title_left_bg.png" alt="" class="on8">
            <h3>这里是标题</h3>
            <div class="gun">
                 
            </div>
        </div>
    </div>
    </div>
    <script>

    </script>
</body>

</html>